<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { formatColumn } from '@/utils/tools.js'
import { queryWelfareList } from '@/api/home'
import { useAccountStore } from '@/stores/account'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const loading = ref(false)
const props = defineProps({
  policyInfo: {
    type: Object
  },
  dutyType: {
    type: String
  }
})
const emit = defineEmits(['openDetailModal'])
function scrollToElement() {
  const element = document.getElementById('welfareInfo')
  element.scrollIntoView()
}
function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  scrollToElement()
}
const pagination = reactive({
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  hideOnSinglePage: true,
  size: 'large',
  onChange: handlePageChange
})

const dynamicColumns = computed(() => {
  return [
    {
      title: t('home.welfare.Recipient'),
      dataIndex: 'duty',
      key: 'duty'
    },
    {
      title: t('home.welfare.ClaimType'),
      dataIndex: 'claimType',
      key: 'claimType',
      width: 120
    },
    {
      title: t('home.welfare.Description'),
      dataIndex: 'ruleDes',
      key: 'ruleDes'
    },
    {
      title: t('home.welfare.OriginalValue'),
      dataIndex: 'elemValue',
      key: 'elemValue',
      width: 140
    },
    {
      title: t('home.welfare.Remaining'),
      dataIndex: 'remaining',
      key: 'remaining',
      width: 140
    },
    {
      title: t('home.welfare.SameEvent'),
      dataIndex: 'sameFlag',
      key: 'sameFlag',
      width: 120
    },
    {
      title: t('home.welfare.WaitingPeriod'),
      dataIndex: 'waitPeriod',
      key: 'waitPeriod',
      width: 120
    },
    {
      title: t('global.action'),
      dataIndex: 'action',
      key: 'action',
      width: 120
    }
  ]
})
const dataSource = ref([])
async function getTableList() {
  loading.value = true
  const data = {
    insuredId: props.policyInfo.insuredId,
    grpPlanCode: props.policyInfo.grpPlanCode,
    customId: props.policyInfo.customer_id,
    contYear: props.policyInfo.policyYear,
    employeeId: props.policyInfo.member_id,
    startDate: props.policyInfo.insuredEffectiveDate,
    endDate: props.policyInfo.insuredExpireDate,
    age: props.policyInfo.age,
    dutyType: props.dutyType
  }
  let res = null
  try {
    res = await queryWelfareList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    dataSource.value = res.data
  }
}
async function initData() {
  getTableList()
}
onMounted(async () => {
  initData()
})
async function openWelfareLink(record) {
  const accountStore = useAccountStore()
  const session = await accountStore.getSession()
  const coreUrl = `${record.sameFlagUrl}&session=${session}`
  window.open(coreUrl)
}
function openDetailModal(info) {
  //福利接口中 如果返回的内容中规则编码为空，使用详情按钮不能使用 现在接口中返回的存在空的规则编码
  if (!info.rulDetNo) return
  emit('openDetailModal', { ...info, detailTitle: info.ruleDes })
}
</script>
<template>
  <div class="welfare-table">
    <a-table
      :pagination="pagination"
      :loading="loading"
      :bordered="false"
      class="ant-table-striped"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      size="middle"
      :dataSource="dataSource"
      :columns="dynamicColumns"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.key === 'action'">
          <span
            class="table-operation"
            :class="{ 'operation-disabled': !record.rulDetNo }"
            @click="openDetailModal(record)"
          >
            {{ $t('home.welfare.UsageDetails') }}</span
          >
        </template>
        <template v-else-if="column.key === 'elemValue'">
          <span :class="{ 'font-red': record.remaining && record.remaining == 0 }">
            {{
              record.elemValue ? `${record.elemValue} ${record.elemUnit}` : `${formatColumn(text)}`
            }}
          </span>
        </template>
        <template v-else-if="column.key === 'remaining'">
          <span :class="{ 'font-red': record.remaining && record.remaining == 0 }">
            {{
              record.remaining ? `${record.remaining} ${record.elemUnit}` : `${formatColumn(text)}`
            }}
          </span>
        </template>
        <template v-else-if="column.key === 'sameFlag'">
          <span
            v-if="record.sameFlag === '双击查看'"
            @click="openWelfareLink(record)"
            class="text-decoration"
            :class="{ 'font-red': record.remaining && record.remaining == 0 }"
            >是</span
          >
          <span v-else :class="{ 'font-red': record.remaining && record.remaining == 0 }">{{
            formatColumn(text)
          }}</span>
        </template>
        <template v-else>
          <span :class="{ 'font-red': record.remaining && record.remaining == 0 }">{{
            formatColumn(text)
          }}</span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<style lang="scss">
.welfare-table {
  .ant-table-striped th,
  .ant-table-striped td {
    border-top: transparent !important;
    border-bottom: transparent !important;
  }
  .ant-table-wrapper .ant-table-pagination.ant-pagination {
    margin-bottom: 0;
  }
}
</style>
<style lang="scss" scoped>
.text-decoration {
  text-decoration-line: underline;
  font-size: 14px;
  color: #4d789c;
  cursor: pointer;
}
.text-decoration:hover {
  color: #97b7c5;
}
:deep(.font-red) {
  color: #cf595d;
}

.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
  border-top: transparent !important;
  border-bottom: transparent !important;
}
</style>
